<template>
	<div class="tikuBg">
		<u-sticky bgColor="#fff">
			<div class="banner">
				<image src="https://www.baixuemianshi.com/zhuanti/images/swiper_xcx2.jpg" mode="widthFix"></image>
			</div>
			<div class="searchBox">
				<u-search placeholder="输入关键字搜索" shape="round" v-model="searchVal"></u-search>
			</div>
		</u-sticky>
		<div class="limitBox" v-if="!limitStatus">
			<div class="formBox" v-if="!nolimit">
				<h3>面试题库登录</h3>
				<p>雪恒教育-白雪面试内部专用</p>
				<div class="btn"><u-button type="error" text="点击登录" @click="toLogin()"></u-button></div>
			</div>
			<div class="formBox" v-else>
				<h3>您暂无权限，请联系教务老师给您添加权限</h3>
			</div>
		</div>
		
		<u-popup :show="showBj" mode="center" :safeAreaInsetBottom="false">
			<div class="popContent">
				<ul class="squre_bj">
					<li v-for="(bj,index) in userinfo" :key="index" @click="changeBj(bj.banji)">
						<h3>{{ bj.banji }}</h3>
					</li>
				</ul>
			</div>
		</u-popup>
		
		
		<u-popup :show="showMoshi" mode="center" :safeAreaInsetBottom="false">
			<div class="popContent">
				<ul class="flex_btns">
					<li v-for="(item,index) in moshiList" :class="item.spell" :key="index" @click="changeMoshi(item)">
						<h3>{{ item.name }}</h3>
					</li>
				</ul>
			</div>
		</u-popup>
		
		<u-popup :show="showZuti" mode="center" :safeAreaInsetBottom="false">
			<div class="popContent" v-if="banjiDetail">
				<div class="overBox">
					<ul class="squre_moshi">
						<li v-for="(item,index) in taotiList" :key="index" @click="changeTaoti(item)">
							<h3>{{ item.title }}</h3>
							<p>{{ item.intro }}</p>
						</li>
					</ul>
					<ul class="squre_moshi half">
						<li class="textCenter back_btn" @click="showZuti = false; showMoshi = true">上一步</li>
					</ul>
				</div>
				
			</div>
		</u-popup>


		
		<div class="container">
			<div class="userInfo"> {{ userinfo[0].student }}同学，当前班级：{{ selectBj }}</div>
			<div class="loadBox" v-if="searchList.length == 0">
				<u-loading-icon size="36" mode="circle" :vertical="true" color="red" text="加载中..." textSize="20"></u-loading-icon>
			</div>
			<div class="items" v-else>
				<div class="item" v-for="(item,index) in searchList" :key="index">
					<h3 v-html="addGl(item.title)"></h3>
					<ul class="tags">
						<li><u-tag :text="item.leixing" plain size="mini" type="success"></u-tag></li>
						<li><u-tag :text="item.time" size="mini" type="warning"></u-tag></li>
					</ul>
					<div class="btns">
						<div class="btn" v-if="item.answer">
							<u-button type="error" size="small" text="查看小白姐逐字稿" @click="showAnswer(item)"></u-button>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="detailBtn" v-if="selectMoshi">
			<div>
				<u-button type="success"  size="small" text="更改班级" @click="showBj = true"></u-button>
			</div>
			<div>
				<u-button type="error"  size="small" text="更改模式" @click="showMoshi = true"></u-button>
			</div>
		</div>

	</div>
</template>

<script>
	import {
		mapActions
	} from 'vuex';
	const db = wx.cloud.database()
	export default {
		data() {
			return {
				
				userinfo: {
					phone: "",
					name: "",
					banji: [],
					shenfen: ""
				},
				showBj: false,
				selectBj: "",
				showMoshi: false,
				selectMoshi: {name: "每日练习",spell: "zuti"},
				selectMoshiIndex: 0,
				moshiList: [
					{name: "每日练习",spell: "zuti"},
					{name: "练过的题",spell: "workend"},
					{name: "作业模式",spell: "homework"},
					{name: "小白姐私教课",spell: "sijiaoke"}
				],
				taotiList:[],
				showZuti: false,
				
				nolimit: false,
				welcome: false,
				lxList: [],
				lists: [],
				yjCurrent: 1,
				filterLxName: "全部类型",
				ejlxList: [],
				filterErlx: "",
				ejCurrent: 1,

				banjiDetail: {
					name: '',
					phone: '',
					banji: '',
					zuti:[],
					homework:[]
				},
				

				
				limitStatus:false,
				searchVal: "",
				
			}
		},
		onLoad(options) {
			wx.showLoading()
		},
		onShow() {
			if(wx.setVisualEffectOnCapture){
			    wx.setVisualEffectOnCapture({
			        visualEffect: 'hidden',
			        success:(res) => {
			            console.log('success回调',res)
			        },
			    })
			}
		},
		onHide() {
			if(wx.setVisualEffectOnCapture){
			    wx.setVisualEffectOnCapture({
			        visualEffect: 'none',
			        success:(res) => {
			            console.log('success回调',res)
			        },
			    })
			}
		},
		computed: {
			userphone() {
				return this.$store.getters.userphone ? this.$store.getters.userphone : '';
			},
			searchList(){
				let that = this
				
				let l = []
				if(that.searchVal){
					l = that.lists.filter(item => item.title.indexOf(that.searchVal) != -1)
				}else{
					l = that.lists
				}
				
				return l
			}
		},
		created() {
			let that = this;
			// that.getList()
		},
		mounted() {
			let that = this 
			if(that.userphone){
				that.getuserStatus()
			}
			wx.hideLoading()
		},
		watch: {
			userphone(val){
				if (this.userphone) {
					this.getuserStatus()
				}
			}
		},
		methods: {
			...mapActions(['LogSetPhone']),
			showLoad(e){
				wx.showLoading()
				setTimeout(() =>{
					wx.hideLoading()
				},2000)
			},
			toLogin(){
				uni.navigateTo({
					url: '../../my/login'
				})
			},
			getuserStatus(){
				let that = this
				db.collection('nbhd_tiku_students').where({
					phone: that.userphone
				}).get({
					success: function(res){
						if(res.data.length > 0){
							that.userinfo = res.data
							that.showBj = true
							uni.showToast({
								title: '登录成功',
								icon: 'success'
							})
							
							that.limitStatus = true
							
						}else{
							uni.showToast({
								title: '暂无权限',
								icon: 'error'
							})
							that.nolimit = true
						}
						
						
					},
					fail: function(req){
						uni.showToast({
							title: '暂无权限',
							icon: 'error'
						})
					}
				})
			},
			getList() {
				let that = this
				let l = that.banjiDetail[that.selectMoshi.spell].filter(item => item.taotiname == that.selectTaoti.title)
				that.lists = l
			},
			getTimuInfo(){
				let that = this
				db.collection('nbhd_tiku_banji').where({
					banji: that.selectBj
				}).get({
					success: function(res) {
						if(res.data.length > 0){
							that.banjiDetail = res.data[0]
							
						}else{
							uni.showToast({
								title: '暂无题目',
								icon: 'error'
							})
							that.pushEmpty()
						}
					}
				})
			},
			pushEmpty(){
				let that = this
				db.collection('nbhd_tiku_banji').add({
					data: {
						teacher: that.userinfo.name,
						phone: that.userinfo.phone,
						banji: that.selectBj,
						time: new Date(),
						timuList:[]
					},
					success: function(res) {
						that.getTimuInfo()
					}
				})
			},
			checkAnswer(info){
				let that = this
				let t = that.banjiDetail.timuList.filter((item,index) => item._id == info._id)
				return t[0].answer
			},
			changeBj(bj){
				this.selectBj = bj
				this.getTimuInfo()
				this.showBj = false
				this.showMoshi = true
			},
			changePicker(e){
				this.selectMoshiIndex = e.detail.value
				this.selectMoshi = this.moshiList[e.detail.value]
			},
			showAnswer(item){
				let that = this
				uni.navigateTo({
					url:"./answer?tmid=" + item._id
				})
			},
			changeMoshi(info){
				this.selectMoshi = info
				
				if(info.spell == 'zuti'){
					let list = []
					let arr = this.banjiDetail.zuti.map(item => item.taotiname)
					arr = [...new Set(arr)]
					arr.map((item,index) =>{
						let f = this.banjiDetail.zuti.filter(n => n.taotiname == item)
						list.push({
							title:item,
							intro:f[0].taotiIntro
						})
					})
					this.taotiList = list
					this.showZuti = true
				}else if(info.spell == 'workend'){
					let l = this.banjiDetail.zuti.filter(item => item.answer)
					this.lists = l
				}else if(info.spell == 'homework'){
					let l = this.banjiDetail.homework
					this.lists = l.reverse()
				}else{
					wx.navigateToMiniProgram({
						shortLink:this.banjiDetail.sijiaoke,
						//develop开发版；trial体验版；release正式版
						envVersion: 'release', 
						success(res) {
						  // 打开成功
						  console.log("跳转小程序成功！",res);
						} 
					})
				}
				this.showMoshi = false
			},
			changeTaoti(info){
				this.selectTaoti = info
				this.showZuti = false
				this.getList()
			},
			addGl(title){
				let that = this
				if(!that.searchVal){
					return title
				}
				let sText = title
				let sKey = "<span class='searchBg'>" + that.searchVal + "</span>"
				let num = -1,
					rStr = new RegExp(that.searchVal, "g"),
					rHtml = new RegExp("\<.*?\>", "ig"), //匹配html元素
					aHtml = sText.match(rHtml); //存放html元素的数组
				sText = sText.replace(rHtml, '{~}'); //替换html标签
				sText = sText.replace(rStr, sKey); //替换key
				sText = sText.replace(/{~}/g, function() { num++;return aHtml[num];});
				return sText
			},
			checkTime(item){
				let time = item.time
				let nTime = new Date()
				let iTime = new Date(time + ' 23:59:59')
				return nTime - iTime > 0 ? true : false
			}
		},
		components: {

		}
	};
</script>

<style>
	@import url(./index.css);
</style>